<template>
  <van-notice-bar left-icon="volume-o" text="easy todo上线啦，一个简易高效的todo管理工具🚀🚀🚀"/>
  <div>
    <van-divider :style="{ color: '#FF841C', borderColor: '#FF841C'}">
      完成情况
    </van-divider>
    <div id="bar" :style="{ width: '100%', height: '500px' }"></div>
  </div>

  <div style="margin-top: 10px">
    <van-divider :style="{ color: '#46be16', borderColor: '#46be16'}">
      已完成
    </van-divider>
    <van-list v-model:loading="firstLoading" :finished="firstFinished" @load="loadFinishToDoList">
      <van-swipe-cell v-for="todo in finishTodoList" :key="todo.id">
        <van-cell v-if="todo.status === 1" :border="false" v-model:value="todo.text" icon="completed"/>
      </van-swipe-cell>
    </van-list>
  </div>

  <div style="margin-top: 10px; margin-bottom: 40px">
    <van-divider :style="{ color: '#d23232', borderColor: '#d23232'}">
      已超时
    </van-divider>
    <van-list v-model:loading="secondLoading" :finished="secondFinished" @load="loadExpiredToDoList">
      <van-swipe-cell v-for="todo in expiredTodoList" :key="todo.id">
        <van-cell v-if="todo.status === -1" :border="false" v-model:value="todo.text" icon="failure"/>
      </van-swipe-cell>
    </van-list>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
  import {getBarChart} from "@/echarts/barChart";
import {getExpiredToDoList, getFinishedToDoList} from "@/api/todo";
import {Notify} from "vant";

  // 已完成todo对应参数
  const finishTodoList = ref([]);
  const firstLoading = ref(false);
  const firstFinished = ref(false);

  // 已超时todo对应参数
  const expiredTodoList = ref([]);
  const secondLoading = ref(false);
  const secondFinished = ref(false);

  const loadFinishToDoList = () => {
    // 获取完成todo请求
    getFinishedToDoList().then(res => {
      if (res.code === 20000) {
        finishTodoList.value = res.data;
        firstLoading.value = false;
        firstFinished.value = true;
      } else {
        Notify({ type: 'warning', message: res.description});
      }
    }).catch(res => {
      console.log(res.message)
    });
  }

const loadExpiredToDoList = () => {
  // 获取超时todo请求
  getExpiredToDoList().then(res => {
    if (res.code === 20000) {
      expiredTodoList.value = res.data;
      secondLoading.value = false;
      secondFinished.value = true;
    } else {
      Notify({ type: 'warning', message: res.description});
    }
  }).catch(res => {
    console.log(res.message)
  });
}


  onMounted(() => {
    getBarChart(document.getElementById('bar'))
  })



</script>

<style scoped>
</style>
